// 易于响应的选项卡插件
// 作者: Samson.Onna <Email : samson3d@gmail.com> 
(function ($) {
    $.fn.extend({
        easyResponsiveTabs: function (options) {
            // 设置默认值，使用逗号分隔设置，例如：
            var defaults = {
                type: 'default', // 类型: 默认，垂直，手风琴；
                width: 'auto', // 宽度设置
                fit: true, // 是否自适应
                closed: false, // 初始状态是否关闭
                tabidentify: '', // 选项卡标识
                activetab_bg: 'white', // 激活选项卡的背景颜色
                inactive_bg: '#F5F5F5', // 非激活选项卡的背景颜色
                active_border_color: '#c1c1c1', // 激活选项卡的边框颜色
                active_content_border_color: '#c1c1c1', // 激活内容区域的边框颜色
                activate: function () {} // 激活回调函数
            }
            // 变量
            var options = $.extend(defaults, options); // 合并默认选项与传入选项
            var opt = options,
                jtype = opt.type,
                jfit = opt.fit,
                jwidth = opt.width,
                vtabs = 'vertical',
                accord = 'accordion';
            var hash = window.location.hash; // 获取当前URL的hash值
            var historyApi = !!(window.history && history.replaceState); // 检查浏览器是否支持history API

            // 事件
            $(this).bind('tabactivate', function (e, currentTab) {
                if (typeof options.activate === 'function') {
                    options.activate.call(currentTab, e); // 调用激活回调函数
                }
            });

            // 主函数
            this.each(function () {
                var $respTabs = $(this); // 当前选项卡
                var $respTabsList = $respTabs.find('ul.resp-tabs-list.' + options.tabidentify); // 获取选项卡列表
                var respTabsId = $respTabs.attr('id'); // 获取选项卡的ID
                $respTabs.find('ul.resp-tabs-list.' + options.tabidentify + ' li').addClass('resp-tab-item').addClass(options.tabidentify); // 添加类名
                $respTabs.css({
                    'display': 'block', // 显示选项卡
                    'width': jwidth // 设置宽度
                });

                if (options.type == 'vertical')
                    $respTabsList.css('margin-top', '3px'); // 设置垂直选项卡的上边距

                $respTabs.find('.resp-tabs-container.' + options.tabidentify).css('border-color', options.active_content_border_color); // 设置内容区域的边框颜色
                $respTabs.find('.resp-tabs-container.' + options.tabidentify + ' > div').addClass('resp-tab-content').addClass(options.tabidentify); // 添加类名
                jtab_options(); // 调用选项函数

                // 属性函数
                function jtab_options() {
                    if (jtype == vtabs) {
                        $respTabs.addClass('resp-vtabs').addClass(options.tabidentify); // 添加垂直选项卡的类名
                    }
                    if (jfit == true) {
                        $respTabs.css({
                            width: '100%',
                            margin: '0px'
                        }); // 自适应设置
                    }
                    if (jtype == accord) {
                        $respTabs.addClass('resp-easy-accordion').addClass(options.tabidentify); // 添加手风琴类名
                        $respTabs.find('.resp-tabs-list').css('display', 'none'); // 隐藏选项卡列表
                    }
                }

                // 将h2标记分配给手风琴标题
                var $tabItemh2;
                $respTabs.find('.resp-tab-content.' + options.tabidentify).before("<h2 class='resp-accordion " + options.tabidentify + "' role='tab'><span class='resp-arrow'></span></h2>");

                // 设置手风琴标题的背景色和边框颜色
                $respTabs.find('.resp-tab-content.' + options.tabidentify).prev("h2").css({
                    'background-color': options.inactive_bg,
                    'border-color': options.active_border_color
                });

                var itemCount = 0; // 计数器
                $respTabs.find('.resp-accordion').each(function () {
                    $tabItemh2 = $(this); // 当前手风琴标题
                    var $tabItem = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')'); // 获取对应的选项卡
                    var $accItem = $respTabs.find('.resp-accordion:eq(' + itemCount + ')'); // 获取对应的手风琴项目
                    $accItem.append($tabItem.html()); // 将选项卡的内容添加到手风琴标题中
                    $accItem.data($tabItem.data()); // 复制选项卡的数据
                    $tabItemh2.attr('aria-controls', options.tabidentify + '_tab_item-' + (itemCount)); // 设置ARIA控制属性
                    itemCount++; // 增加计数
                });

                // 为选项卡项目分配'aria-controls'属性
                var count = 0,
                    $tabContent; // 初始化计数器和选项卡内容
                $respTabs.find('.resp-tab-item').each(function () {
                    $tabItem = $(this);
                    $tabItem.attr('aria-controls', options.tabidentify + '_tab_item-' + (count)); // 设置选项卡的ARIA控制属性
                    $tabItem.attr('role', 'tab'); // 设置角色属性
                    $tabItem.css({
                        'background-color': options.inactive_bg, // 设置非激活选项卡的背景色
                        'border-color': 'none' // 设置边框颜色为无
                    });

                    // 为选项卡内容分配'aria-labelledby'属性
                    var tabcount = 0; // 初始化计数器
                    $respTabs.find('.resp-tab-content.' + options.tabidentify).each(function () {
                        $tabContent = $(this);
                        $tabContent.attr('aria-labelledby', options.tabidentify + '_tab_item-' + (tabcount)).css({
                            'border-color': options.active_border_color // 设置内容区域的边框颜色
                        });
                        tabcount++; // 增加计数
                    });
                    count++; // 增加计数
                });

                // 显示正确的内容区域
                var tabNum = 0; // 初始化选项卡编号
                if (hash != '') {
                    var matches = hash.match(new RegExp(respTabsId + "([0-9]+)")); // 匹配当前hash值
                    if (matches !== null && matches.length === 2) {
                        tabNum = parseInt(matches[1], 10) - 1; // 解析选项卡编号
                        if (tabNum > count) {
                            tabNum = 0; // 如果超出范围，则设置为0
                        }
                    }
                }

                // 激活正确的选项卡
                $($respTabs.find('.resp-tab-item.' + options.tabidentify)[tabNum]).addClass('resp-tab-active').css({
                    'background-color': options.activetab_bg, // 设置激活选项卡的背景色
                    'border-color': options.active_border_color // 设置激活选项卡的边框颜色
                });

                // 根据选项设置选项卡的初始状态
                if (options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) {
                    $($respTabs.find('.resp-accordion.' + options.tabidentify)[tabNum]).addClass('resp-tab-active').css({
                        'background-color': options.activetab_bg + ' !important', // 设置背景色
                        'border-color': options.active_border_color, // 设置边框颜色
                        'background': 'none' // 去除背景样式
                    });

                    $($respTabs.find('.resp-tab-content.' + options.tabidentify)[tabNum]).addClass('resp-tab-content-active').addClass(options.tabidentify).attr('style', 'display:block'); // 显示激活内容区域
                }
                // 为选项卡模式激活之前分配适当的类
                else {
                    // $($respTabs.find('.resp-tab-content.' + options.tabidentify)[tabNum]).addClass('resp-accordion-closed'); // 移除resp-tab-content-active
                }

                // 选项卡点击事件处理函数
                $respTabs.find("[role=tab]").each(function () {

                    var $currentTab = $(this); // 当前选项卡
                    $currentTab.click(function () {

                        var $currentTab = $(this);
                        var $tabAria = $currentTab.attr('aria-controls'); // 获取当前选项卡的控制属性

                        // 处理手风琴模式的点击
                        if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
                            $respTabs.find('.resp-tab-content-active.' + options.tabidentify).slideUp('', function () {
                                $(this).addClass('resp-accordion-closed'); // 添加关闭类
                            });
                            return; // 结束函数
                        }

                        // 处理选项卡激活
                        $currentTab.addClass('resp-tab-active').css({
                            'background-color': options.activetab_bg, // 激活背景色
                            'border-color': options.active_border_color // 激活边框颜色
                        });
                        $respTabs.find('.resp-tab-item.' + options.tabidentify).not($currentTab).removeClass('resp-tab-active').css({
                            'background-color': options.inactive_bg, // 非激活背景色
                            'border-color': 'none' // 非激活边框颜色
                        });

                        // 激活对应内容区域
                        $respTabs.find('.resp-tab-content.' + options.tabidentify).not($respTabs.find('.resp-tab-content.' + options.tabidentify + '[aria-labelledby=' + $tabAria + ']')).slideUp('fast', function () {
                            $(this).removeClass('resp-tab-content-active'); // 移除活动类
                        });

                        // 显示内容区域
                        $respTabs.find('.resp-tab-content.' + options.tabidentify + '[aria-labelledby=' + $tabAria + ']').slideDown('fast', function () {
                            $(this).addClass('resp-tab-content-active'); // 添加活动类
                        });

                        // 记录点击历史
                        if (historyApi) {
                            window.history.replaceState(null, null, '#' + respTabsId + $currentTab.index()); // 更新历史记录
                        }
                    });
                });
            });
        }
    });
})(jQuery);
